<template>
  <div>
            <!-- todo: 拖拽功能和批量删除暂不处理，后面再进行填充  参考资料：04-业务开发    -->
<!--    <el-switch v-model="draggable" active-text="开启拖拽" inactive-text="关闭拖拽"></el-switch>-->
<!--    <el-button v-if="draggable" @click="editSort">批量保存</el-button>-->
<!--    <el-button type="danger" @click="batchDelete">批量删除</el-button>-->
    <el-tree :data="data" :props="defaultProps"
             :expand-on-click-node="false"
             show-checkbox
             node-key="catId"
             :default-expand-keys=expandKeys
             @node-drop="handleDrop"
             draggable="draggable"
             :allow-drop="allowDrop">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label}}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            v-if="data.catLevel <= 2"
            @click="() => append(data)">
            添加
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => edit(data)">
            编辑
          </el-button>
          <el-button
            type="text"
            size="mini"
            v-if="data.childrens.length == 0"
            @click="() => remove(data)">
            删除
          </el-button>
        </span>
      </span>

    </el-tree>

    <el-dialog :title="dialogType?'编辑商品类别':'新增商品类别'" :visible.sync="dialogCategoryVisible"
               width="30%" :close-on-click-modal="false">
      <el-form :model="categoryForm">
        <el-form-item label="类别名称" :label-width="formLabelWidth">
          <el-input v-model="categoryForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标" :label-width="formLabelWidth">
          <el-input v-model="categoryForm.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计量单位" :label-width="formLabelWidth">
          <el-input v-model="categoryForm.productUnit" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCategoryVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data () {
    return {
      data: [],
      expandKeys: [],
      defaultProps: {
        children: 'childrens',
        label: 'name'
      },
      dialogCategoryVisible: false,
      categoryForm: {
        name:null,
        icon:null,
        productUnit:null,
        showStatus:1,
        sort:0,
        catId:null,
        catLevel:1,
        productCount:null
      },
      formLabelWidth: '120px',
      dialogType: false, // false 新增； true 编辑
      draggable: false, // 拖拽功能默认是关闭的
      updateNodes: [], // 拖拽节点后，需要更新的节点的节点信息
    }
  },
  // todo: 需要放在外层初始化才会生效
  created () {
    this.findCategoryWithTree()
  },
  methods: {
    // 获取分类树
    findCategoryWithTree () {
      this.$http({
        url: this.$http.adornUrl('/product/category/findCategoryWithTree'),
        method: 'get'
      }).then(({data}) => {
        console.log('成功获取到商品类别数据：', data.data)
        this.data = data.data
      })
    },
    // 添加
    append (data) {
      this.dialogType = false
      console.log('添加 >>> ', data)
      this.dialogCategoryVisible = true // 打开弹出窗口

      this.categoryForm = {} // 先置空处理
      this.categoryForm.parentCid = data.catId// 添加的类别对应的父菜单
      this.categoryForm.catLevel = data.catLevel + 1 // 设置添加类别的层级
      this.categoryForm.showStatus = 1 // 菜单的显示状态  1 显示  0 被删除
      this.categoryForm.sort = 0 // 排序 默认给 0

      // 重置更新的数据   暂不使用，会导致新增页面填入数据自动清空
      // this.categoryForm.catId = null;
      // this.categoryForm.name = "";
      // this.categoryForm.icon = "";
      // this.categoryForm.productUnit = "";
    },
    // 编辑
    edit (data) {
      console.log('编辑 >>>', data)
      this.dialogType = true
      this.dialogCategoryVisible = true // 打开弹出窗口
      this.categoryForm = data
    },
    // 新增或编辑类别接口调用
    submitForm () {
      console.log('categoryForm >>>', this.categoryForm)
      // 通用校验保留
      if (!this.categoryForm.name) {
        this.$message({
          message: '请先输入类别名称！',
          type: 'warning'
        })
        return
      }
      if (!this.dialogType) {
        // 新增类别
        this.addDialog()
      }
      if (this.dialogType) {
        // 编辑类别
        this.editDialog()
      }
    },
    addDialog () {
      this.$http({
        url: this.$http.adornUrl('/product/category/save'),
        method: 'post',
        data: this.$http.adornData(this.categoryForm, false)
      }).then(({data}) => {
        if (data && data.code === 200) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          // 关闭弹窗
          this.dialogCategoryVisible = false
          // 重新加载所有的菜单数据
          this.findCategoryWithTree()
        } else {
          this.$message({
            message: data.msg,
            type: 'error'
          })
        }
        // 设置默认展开的父节点信息
        // eslint-disable-next-line no-undef
        // this.expandKeys = [node.parent.data.catId]
      })
    },
    editDialog () {
      // 查询后台接口返回数据
      this.$http({
        url: this.$http.adornUrl(`/product/category/update`),
        method: 'post',
        data: this.$http.adornData(this.categoryForm, false)
      }).then(({data}) => {
        // 不管查询成功还是失败,x先关闭弹窗
        if (data && data.code === 200) {
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          // 关闭弹窗
          this.dialogCategoryVisible = false
          // 重新加载所有的菜单数据
          this.findCategoryWithTree()
        } else {
          this.$message({
            message: data.msg,
            type: 'error'
          })
        }
      })
    },
    // 删除
    remove (data) {
      console.log('删除 >>>', data)
      // 弹窗提示
      this.$confirm(`是否确认删除【${data.name}】记录?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [data.catId]
        // ids.push(data.catId)
        console.log('ids >>>', ids)
        this.$http({
          url: this.$http.adornUrl('/product/category/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {
          if (data && data.code === 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          }
          // 重新加载所有的菜单数据
          this.findCategoryWithTree()
          // 设置默认展开的父节点信息
          // eslint-disable-next-line no-undef
          this.expandKeys = [node.parent.data.catId]
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // draggingNode 要拖拽的节点
    // dropNode 目标节点
    // type 参数有三种情况：'prev'、'inner' 和 'next'
    handleDrop (draggingNode, dropNode, type,event) {

    },
    // draggingNode 要拖拽的节点
    // dropNode 目标节点
    // type 参数有三种情况：'prev'、'inner' 和 'next'
    allowDrop(draggingNode, dropNode, type){

    },
    editSort () {

    },
    batchDelete () {

    }
  }
}
</script>

<style>

</style>
